<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGPU Triangle</title>
</head>

<body>
    <!-- canvas：用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>

    <script type="module">
        // 编写WebGPU代码        
        // 1. 初始化WebGPU
        const adapter = await navigator.gpu.requestAdapter();
        // 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();

        //配置WebGPU上下文，把id名为webgpu的Canvas元素作为WebGPU的画布
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        //获取浏览器默认的颜色格式
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,//WebGPU渲染器使用的GPU设备对象
            format: format,//WebGPU渲染器使用的颜色格式
        });

        // 指向用于Canvas画布的纹理视图对象
        // (Canvas对应的颜色缓冲区)
        // 该渲染通道renderPass输出的像素数据会存储到
        // Canvas画布对应的颜色缓冲区(纹理视图对象)
        let contextView = context.getCurrentTexture().createView();

        const vertexArray = new Float32Array([
            // 三角形三个顶点坐标的x、y、z值
            0.0, 0.0, 0.0,//顶点1坐标
            1.0, 0.0, 0.0,//顶点2坐标
            0.0, 1.0, 0.0,//顶点3坐标
        ]);

        const vertexBuffer = device.createBuffer({
            size: vertexArray.byteLength,//顶点数据的字节长度
            //usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)
            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
        });

        //把vertexArray里面的顶点数据写入到vertexBuffer对应的GPU显存缓冲区中
        //参数2的0表示从vertexArray的数据开头读取数据。
        device.queue.writeBuffer(vertexBuffer, 0, vertexArray)

        import { vertex, fragment } from './shader.js'

        let vertexShaderModule = device.createShaderModule({ code: vertex });
        let fragmentShaderModule = device.createShaderModule({ code: fragment });

        const pipeline = device.createRenderPipeline({
            layout: 'auto',
            vertex: {
                // 顶点着色器
                module: vertexShaderModule,
                entryPoint: "main",
                //顶点相关配置
                buffers: [
                    {
                        //一个顶点数据占用的字节长度，
                        // 该缓冲区一个顶点包含xyz三个分量，
                        // 每个数字是4字节浮点数，3*4字节长度
                        arrayStride: 3 * 4,
                        attributes: [{
                            //GPU显存上顶点缓冲区标记存储位置
                            shaderLocation: 0,
                            //格式：loat32x3表示一个顶点数据包含3个32位浮点数
                            format: "float32x3",
                            //arrayStride表示每组顶点数据间隔字节数，
                            // offset表示读取改组的偏差字节数，
                            // 没特殊需要一般设置0
                            offset: 0
                        }]
                    }
                ]
            },
            fragment: {
                // 片元着色器
                module: fragmentShaderModule,
                entryPoint: "main",
                targets: [{
                    //和WebGPU上下文配置的颜色格式保持一致
                    format: format
                }]
            },
            primitive: {
                //三角形绘制顶点数据
                topology: "triangle-list",
            }
        });

        // 创建GPU命令编码器对象
        const commandEncoder = device.createCommandEncoder();
        const renderPass = commandEncoder.beginRenderPass({
            // 给渲染通道指定颜色缓冲区，配置指定的缓冲区
            colorAttachments: [{
                view: contextView,
                storeOp: 'store',//像素数据写入颜色缓冲区
                loadOp: 'clear',
                //背景颜色
                clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 },
            }]
        });

        // 设置该渲染通道控制渲染管线
        renderPass.setPipeline(pipeline);
        renderPass.setVertexBuffer(0, vertexBuffer);
        // 绘制命令.draw()绘制顶点数据
        renderPass.draw(3);
        // 渲染通道结束命令.end()
        renderPass.end();
        // 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
        const commandBuffer = commandEncoder.finish();
        // 命令编码器缓冲区中命令传入GPU设备对象的命令队列.queue
        device.queue.submit([commandBuffer]);
    </script>
</body>

</html>